<template>
    <div class="container">
        <div class="search-content">
        <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item label="发起日期：">
                <el-date-picker
                    v-model="initiate_date"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="(val) => handleChangeTime(val, 'initiate')">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="预约日期：">
                <el-date-picker
                    v-model="appoint_date"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="(val) => handleChangeTime(val, 'appoint')">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="is_to_store" label="是否到店试驾：">
			    <el-select v-model="searchContent.is_to_store" placeholder="请选择">
                    <el-option
                        v-for="item in toStoreOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="esign_finish" label="是否签署合同：">
			    <el-select v-model="searchContent.esign_finish" placeholder="请选择">
                    <el-option
                        v-for="item in esignFinishOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>	
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :header-cell-class-name="hdCellClassName" 
                :default-sort="{prop: 'id'}"
            >
                <el-table-column 
                  type="index" 
                  label="序号"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  label="试驾经销商"
                  min-width="150"
                  align="center"
                  prop="store_name">
                </el-table-column>
                <el-table-column 
                  label="发起时间"
                  min-width="150"
                  align="center"
                  prop="initiate_time">
                </el-table-column>
                <el-table-column 
                  label="预约时间"
                  min-width="150"
                  align="center"
                  prop="appoint_time">
                </el-table-column>
                <el-table-column 
                  label="姓名"
                  min-width="120"
                  align="center"
                  prop="name">
                </el-table-column>
                <el-table-column 
                  label="手机号"
                  min-width="120"
                  align="center"
                  prop="mobile">
                </el-table-column>
                <el-table-column 
                  label="试驾车系"
                  min-width="150"
                  align="center"
                  prop="car_type">
                </el-table-column>
                <el-table-column 
                  label="是否到店试驾"
                  min-width="110"
                  align="center"
                  prop="is_to_store" >
                </el-table-column>
                <el-table-column 
                  label="是否签署合同"
                  min-width="110"
                  align="center"
                  prop="esign_finish">
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group">
				<el-button type="primary" @click="getData('export')">导出</el-button>
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import { objScreen } from "@/common/js/util.js";
import Qs from 'qs';
export default {
    data() {
        return {
            searchContent: {
				initiate_time_begin: '', // 发起开始日期
				initiate_time_end: '',   // 发起结束日期
				appoint_time_begin: '',  // 预约开始日期
				appoint_time_end: '',    // 预约结束日期
                is_to_store: '',         // 是否到店试驾
                esign_finish: '',        // 是否签署合同 
                is_search: false         // 是否处于搜索
            },
            initiate_date: [],           // 发起日期
            appoint_date: [],            // 预约日期
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 20,         // 每页显示数量
                total: 0              // 数据总数
            },
			toStoreOptions:[
				{label: '是', value: 1}	,	
				{label: '否', value: 2}			
			],
			esignFinishOptions:[
				{label: '是', value: 1}	,	
				{label: '否', value: 0}			
			],
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
        }
    },
    methods: {
        handleChangeTime(val, key) {
            if(val) {
                this.searchContent[key + '_time_begin'] = val[0];
                this.searchContent[key + '_time_end'] = val[1];
            } else {
                this.searchContent[key + '_time_begin'] = null;
                this.searchContent[key + '_time_end'] = null;
            }
        },
        hdCellClassName() {
            return 'hdCellStyle'
        },
        async getData(action = null) {
            let datas = {
                pageSize: this.pageArr.pageSize,
                page: this.pageArr.curpage
            }
            if(this.searchContent.is_search) {
                datas = {...datas, ...this.searchContent};
            }
            if(action == "export") {
                datas.is_export = 1;
				const url = this.$store.state.location.origin + '/admin/appointment/index.php?act=testDrive&op=testDriveList&' + Qs.stringify(datas);
                window.open(url)
            } else {
                this.$http.get('/admin/appointment/index.php?act=testDrive&op=testDriveList', {params: datas}).then(res => {
                    if(res.code == 1) {
                        this.dataList = res.data.list
                        this.pageArr.total = parseInt(res.data.totalCount)
                    }
                })
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        fieldFilter(data, field) {
            if(!data) return [];
            return data.map((item, key) => {
                let obj = {};
                field.map(item2 => {
                    if(item[item2]) {
                        obj[item2] = item[item2]
                    }
                })
                return obj;
            })
        },
        handleSearch() {
            if(!this.searchContent.is_search) this.searchContent.is_search = true;
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleReset() {
            this.$refs.searchFrom.resetFields();
            this.initiate_date = []
            this.appoint_date = []
            if(!this.searchContent.is_search) return;
            this.searchContent = {
                is_search: false
            }
            this.pageArr.curpage = 1;
            this.getData();
        },
    },
    created() {
        this.$parent.showButton = false;
        this.getData()
    },
	mounted() {
		resize(this)
	}
}
</script>
<style lang="scss" scoped>
.search-content { padding: 10px 0; }
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
